<template >
  <div>
    <view v-if='openId' class="container">
        <div class="logo_img">
            <img src="/static/images/logo.png">
          </div>
          <div>
                <div  class="input-sname" >
                    <input v-model=" mobile" type='number' maxlength="11" placeholder="请输入手机号" label="用户名"> 
                </div> 
              <div v-if='passIs' class="input-code">
                    <input placeholder="请输入验证码" v-model=" smsCode" label="验证码" >  
                      <div   class="from-Code-btn">
                        <span v-if="sendAuthCode" class="auth_text auth_text_blue" @click="CodeBtn" style='cursor:pointer'>获取验证码(120)</span>
                        <span v-else class="auth_text" style='cursor:pointer'> <span class="auth_text_blue" style='cursor:pointer'>{{authtime}} </span> 秒后重新发送</span>
                      </div>
              </div>
               <div v-else class="input-code">
                    <input placeholder="请输密码"  type="password" v-model="password"   >  
                       
              </div>
              
          </div>
         
          <div class="btn_login" @click='login'>
             <span class="button">登录</span>  
         </div>
          <div class="registered">
              <p @click='Cpassword'>{{joinText}}</p>
              <!-- <p @click='Cregistered'>免费注册</p> -->
          </div>
    </view>
    <view v-else>
       <view  class="profile-info">
          <div class="profile-title">
            <section>
              <img  src="/static/images/ic_menu_me.png" class="head-portrait"/>
            </section>
            <button style="width:30vw;height:40px;line-height:40px;paddingt:0;fongt-size:13px;" open-type="getUserInfo" @getuserinfo="bindGetUserInfo" @click="getUserInfo1">微信授权</button> 
          </div>
      
        </view>
    </view>
  </div>
</template> 

<script>
// import api from '@/utils/api'
import wx from 'wx'
 
import util from '@/utils/util'
import api from '@/utils/api'
export default {
  data () {
    return {
      status: false,
      orderId: 0,
      mobile:'',
      smsCode:'',
      authtime:120,
      sendAuthCode: true,
      openId:'',
      passIs:true,
      password:'',
      joinText:'密码登录'
    }
  },
  async mounted () {
      this.openId=wx.getStorageSync('openId');
      this.getSetting();
  },
  methods: {
    Cpassword(){
      if(this.passIs){
        this.passIs=false;
        this.joinText='账号密码登录'
      }else{
        this.passIs=true
        this.joinText='密码登录'
      }
        
    },
    Cregistered(){

    },
   async login(){
     if ( this.mobile.length<11) {
        wx.showToast({
                title: '请先输入完整手机号',
                icon: 'none'
              });
         return false     
      } ;
       
      if(this.smsCode==''&&this.passIs){
            wx.showToast({
                title: '请先输入验证码',
                icon: 'none'
              });
         return false    

      }
    
           if(this.password==''&&this.passIs==false){
                wx.showToast({
                    title: '请正确输入密码',
                    icon: 'none'
                  });
            return false    

          }
     
                let res
                if(this.passIs){
                  let data=JSON.stringify({ "mobile": this.mobile, "smsCode": this.smsCode, "userType": "1", "storeType": "2" ,"longitude": "", "latitude": "" })
                   res = await api.SmsLogin({"data":data});
                }else{
                  let data=JSON.stringify({ "mobile": this.mobile, "password": this.password, "userType": "1", "storeType": "2" ,"longitude": "", "latitude": "" })
                   res = await api.UserLogin({"data":data});
                }
           
              
              if(res.status==0){
                         wx.setStorageSync('token', res.data.token );
                    wx.navigateBack()
                        wx.showToast({
                          title: '登录成功'
                        });
              }else{
                        wx.showToast({
                        title: res.msg,
                        icon: 'none'
                      })
              }
       
    },
   async  CodeBtn() {
   
  
      if ( this.mobile.length<11) {
          wx.showToast({
                title: '请先输入完整手机号',
                icon: 'none'
              })
              return false;
      }
      let data=JSON.stringify({"mobile":this.mobile})
 
      const res = await api.GetVerSmsCode({"data":data});
    
      if (res.status = '0'){
        this.sendAuthCode = false;
        this.authtime = 120;
        this.auth_timetimer = setInterval(()=>{
          this.authtime--;
          if(this.authtime<=0){
            this.sendAuthCode = true;
            clearInterval(this.auth_timetimer);
          }
          }, 1000);
        }
    },
      getSetting(){
        let that =this
      wx.getSetting({
        success: function(res){
          if (res.authSetting['scope.userInfo']) {
            wx.getUserInfo({
              success: function(res) {
                console.log(res,1111)
                 that.userImg=res.userInfo.avatarUrl;
                that.nickName=res.userInfo.nickName;
                 console.log(res)
                //用户已经授权过
                console.log('用户已经授权过')
                wx.login({
                  success (res) {
                      console.log(res,222)
                    if (res.code) {
                       wx.showLoading({
                          title: '加载中' // 数据请求前loading
                        })
                      //发起网络请求
                       that.getOpenId(res.code)
                      
                       }

                      
                   
                  }
                })
              }
            })
          }else{
            console.log('用户还未授权过')
          }
        }
      })

    },
    async getOpenId (code) {
    
      // console.log('地址管理,请求结果', res);
        let data=JSON.stringify( { "code":code, "payClient":"jsapi_buyer_mini"})
        const res = await api.getOpenId({"data":data});
        wx.setStorageSync('openId',res.data.openId)
        this.openId=true;
        wx.hideLoading();
    },
    getUserInfo1(){
      console.log('click事件首先触发')
      // 判断小程序的API，回调，参数，组件等是否在当前版本可用。  为false 提醒用户升级微信版本
      // console.log(wx.canIUse('button.open-type.getUserInfo'))
      if(wx.canIUse('button.open-type.getUserInfo')){
        // 用户版本可用
      }else{
        console.log('请升级微信版本')
      }
    },
    bindGetUserInfo(e) {
      // console.log(e.mp.detail.rawData)
      if (e.mp.detail.rawData){
        //用户按了允许授权按钮
        console.log('用户按了允许授权按钮')
        // 后续再次获取用户信息
        this.getSetting();
      } else {
        //用户按了拒绝按钮
        console.log('用户按了拒绝按钮')
      }
    },
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: 'dfcShop',
      desc: '大风车商场',
      path: '/pages/pay/payResult'
    }
  }
}
</script>

<style lang='scss' scoped>
page {
  min-height: 100%;
  width: 100%;
  background: #fff;
}
.registered{
  line-height: 14px;
  height: 14px;
  color:rgba(51,51,51,1); 
  font-size: 12px;
   width: 264px;
   margin: 0  auto;
   padding-top: 10px;
  p:nth-child(1){
        float: left;
  }
  p:nth-child(2){
        float: right;
  }
}
.head-portrait{
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  margin: 20vw auto 25px;
  display:block;

 }
.input-sname{
 
  border-bottom: 1px solid rgba(51,51,51,0.2);
  font-size: 13px;
  width: 80vw;;
  margin: 0 auto;
  
  height: 40px;;
  input{
    line-height: 40px;
    padding-left:4vw;
    height: 40px;
  }
}
.input-code{
  
  border-bottom: 1px solid rgba(51,51,51,0.2);
  font-size: 13px;
  width: 80vw;;
  margin: 0 auto;
  margin-top: 20px;
  height: 40px;;
  input{
    float: left;
    width: 25vw;;
    line-height: 40px;
    height: 40px;;
      padding-left:4vw;
      }

}
 .from-Code-btn{
  height: 34px;
  line-height: 34px;
  border: 0;
  border-radius: 4px;
  background-color:#FF4444;
  color: #fff;
  font-size: 12px;
  float: right;
  margin-top: 3px;
  padding: 0 10px;
  span{
    height: 34px;;
    line-height: 34px;
    
  }
}
.container {
  height: 100%;
  background: #fff;
}
 .logo_img{
   img{
      width: 85px;
      height: 85px;
      display: block;
      margin: 13.333vw auto 8vw;
   }
 }
   .btn_login{
    text-align: center;
    margin: 15px auto;
    .button{
      width: 264px;
      height: 39px;
      background-color:#FF4444;
      border: 0;
      border-radius:4px;
      box-shadow:0px 13px 57px 0px #f8afb3;
      line-height: 39px;

      font-size: 15px;
      color: #fff;
      font-weight: 500;
      display: block;
    }
  }

</style>
